<template>
    <div class="login">
        <div class="title">房源管理系统</div>
        <div class="content">
            <div class="login-box">
                <el-avatar class="login-avatar" :size="100" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                <div class="login-form">
                    <el-form @keyup.enter="onSubmitPre()" ref="formRef" :rules="rules" size="large" :model="form">
                        <el-form-item prop="phonenumber">
                            <el-input
                                ref="phonenumberRef"
                                type="text"
                                clearable
                                v-model.trim="form.phonenumber"
                                placeholder="手机号"
                            >
                                <template #prefix>
                                    <Icon name="fa fa-user" class="form-item-icon" size="16" color="var(--el-input-icon-color)" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                ref="passwordRef"
                                v-model.trim="form.password"
                                type="password"
                                placeholder="密码"
                                show-password
                            >
                                <template #prefix>
                                    <Icon name="fa fa-unlock-alt" class="form-item-icon" size="16" color="var(--el-input-icon-color)" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="captchaInfo">
                            <el-input
                                ref="captchaRef"
                                style="width: 300px;"
                                v-model.trim="form.captchaInfo"
                                placeholder="验证码"
                            >
                            </el-input>
                            <img class="captcha-img" :src="state.captchaImg" @click="getLoginCaptcha"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                :loading="state.submitLoading"
                                class="submit-button"
                                round
                                type="primary"
                                size="large"
                                @click="onSubmitPre()"
                            >
                                登录
                            </el-button>
                        </el-form-item>
                        <div class="register-button">
                            <span>没有账号，去</span>
                            <el-button link type="primary" @click="goRegister()">注册</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
// import * as pageBubble from '@/utils/pageBubble'
import type { FormInstance, InputInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { loginStore } from '@/stores'
import { useRouter, useRoute } from 'vue-router'
import Validator from '@/assets/js/validatorReg'

const router = useRouter()
const route = useRoute()

const useLoginStore = loginStore()

const formRef = ref<FormInstance>()
const phonenumberRef = ref<InputInstance>()
const captchaRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const state = reactive({
    showCaptcha: false,
    captchaImg: '',
    captchaUuid: '',
    submitLoading: false,
})
const form = reactive({
    phonenumber: '18899995555',
    password: '18899995555',
    keep: false,
    captchaId: '',
    captchaInfo: '',
})

// 表单验证规则
const rules = reactive({
    phonenumber: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { validator: Validator.mobilePhoneValidator, trigger: 'blur' }
    ],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    captchaInfo: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})

const focusInput = () => {
    if (form.phonenumber === '') {
        phonenumberRef.value!.focus()
    } else if (form.password === '') {
        passwordRef.value!.focus()
    } else if (form.captchaInfo === '') {
        captchaRef.value!.focus()
    }
}

const getLoginCaptcha = () => {
    const params = {}
    useLoginStore.getLoginCaptcha(params).then((res: any) => {
        if (res.state === 'OK') {
            state.captchaImg = 'data:image/png;base64,' + res.body?.img
            state.captchaUuid = res.body?.uuid
        } else {
            ElMessage.error(res.message || '获取图形验证码失败')
        }
    })
    .catch((error: any) => {
        ElMessage.error(error.errorMessage)
    })
}

onMounted(() => {
    getLoginCaptcha()
})


const onSubmitPre = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            login()
        } else {
            focusInput()
        }
    })
}

const goRegister = () => {
    router.push({ path: '/register' })
}

const login = () => {
    state.submitLoading = true
    let params = {
        phonenumber: form.phonenumber,
        password: form.password,
        uuid: state.captchaUuid,
        code: form.captchaInfo,
    }
    useLoginStore.login(params).then((res: any) => {
        const { state, body } = res
        if (state === 'OK' && body) {
            router.push({ path: '/admin' })
        } else {
            ElMessage.error(res.errorMessage || '登录失败')
        }
    }).catch((error: any) => {
        ElMessage.error(error.errorMessage)
    }).finally(() => {
        state.submitLoading = false
    })
}
</script>

<style scoped lang="scss">
.login {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('@/assets/images/login-background.png');
    background-size: cover;
    .title {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 30px;
        font-weight: 600;
        color: white;
    }
    .content {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .login-box {
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 10%;
            top: 20%;
            width: 430px;
            .login-avatar {
                margin: 0 auto;
            }
            .login-form {
                padding: 30px;
                .captcha-img {
                    border-radius: 2px;
                    margin-left: 10px;
                    width: 58px;
                    height: 38px;
                    cursor: pointer;
                }
                .submit-button {
                    width: 100%;
                    letter-spacing: 2px;
                    font-weight: 300;
                    margin-top: 15px;
                    --el-button-bg-color: var(--el-color-primary);
                }
                .register-button {
                    display: flex;
                    justify-content: center;
                    span {
                        color: #FFF;
                    }
                }
            }
        }
    }
}

.white-color {
    color: #fff;
}

@media screen and (max-width: 720px) {
    .login {
        display: flex;
        align-items: center;
        justify-content: center;
        .login-box {
            width: 340px;
            margin-top: 0;
        }
    }
}

// 暗黑样式
@at-root .dark {
    .bubble {
        background: url(/@/assets/bg-dark.jpg) repeat;
    }
    .login {
        .login-box {
            background: #161b22;
        }
        .head {
            img {
                filter: brightness(61%);
            }
        }
        .form {
            .submit-button {
                --el-button-bg-color: var(--el-color-primary-light-5);
                --el-button-border-color: rgba(240, 252, 241, 0.1);
            }
        }
    }
}
@media screen and (max-height: 800px) {
    .login .login-box {
        margin-bottom: 0;
    }
}
</style>
